<template>
  <div
    class="app-container"
    style="overflow: initial;"
  >
    <div class="report-manage">
      <el-form>
        <el-form-item label="">
          <el-button
            v-waves
            type="primary"
            @click="onSubmit"
          >
            保存修改
          </el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="8">
          <div class="block">
            <p class="title">
              案件覆盖率情况统计表
              <span
                v-show="!!conf[0]"
                class="next-time"
              >下次：{{ switchs.cover.nextTime||'---' }}</span>
            </p>
            <div class="thumb stat-case" />
            <el-switch
              v-model="conf[0]"
              class="switchs"
              active-color="#0096E0"
              inactive-color="#E5E6EC"
              active-text=""
              inactive-text=""
              @change="handleChange0"
            />
            <p class="times-per-date">
              （生成频率：日/生成时间：9:00:00）
            </p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="block">
            <p class="title">
              案件平均处理时效统计表
              <span
                v-show="!!conf[1]"
                class="next-time"
              >下次：{{ switchs.avgEfficiency.nextTime||'---' }}</span>
            </p>
            <div class="thumb hour" />
            <el-switch
              v-model="conf[1]"
              class="switchs"
              active-color="#0096E0"
              inactive-color="#E5E6EC"
              active-text=""
              inactive-text=""
              @change="handleChange1"
            />
            <p class="times-per-date">
              （生成频率：日/生成时间：9:00:00）
            </p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="block">
            <p class="title">
              周案件处理时效统计表
              <span
                v-show="!!conf[2]"
                class="next-time"
              >下次：{{ switchs.efficiency.nextTime||'---' }}</span>
            </p>
            <div class="thumb week-hour" />
            <el-switch
              v-model="conf[2]"
              class="switchs"
              active-color="#0096E0"
              inactive-color="#E5E6EC"
              active-text=""
              inactive-text=""
              @change="handleChange2"
            />
            <p class="times-per-date">
              （生成频率：周/生成时间：9:00:00）
            </p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="block">
            <p class="title">
              周案件处理时效环比统计表
              <span
                v-show="!!conf[3]"
                class="next-time"
              >下次：{{ switchs.efficiencyChain.nextTime||'---' }}</span>
            </p>
            <div class="thumb last-week-hour" />
            <el-switch
              v-model="conf[3]"
              class="switchs"
              active-color="#0096E0"
              inactive-color="#E5E6EC"
              active-text=""
              inactive-text=""
              @change="handleChange3"
            />
            <p class="times-per-date">
              （生成频率：周/生成时间：9:00:00）
            </p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="block">
            <p class="title">
              案件回款情况统计表
              <span
                v-show="!!conf[4]"
                class="next-time"
              >下次：{{ switchs.bill.nextTime||'---' }}</span>
            </p>
            <div class="thumb bill" />
            <el-switch
              v-model="conf[4]"
              class="switchs"
              active-color="#0096E0"
              inactive-color="#E5E6EC"
              active-text=""
              inactive-text=""
              @change="handleChange4"
            />
            <p class="times-per-date">
              （生成频率：日/生成时间：9:00:00）
            </p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="block">
            <p class="title">
              通话详情统计表
              <span
                v-show="!!conf[5]"
                class="next-time"
              >下次：{{ switchs.call&&switchs.call.nextTime||'---' }}</span>
            </p>
            <div class="thumb call" />
            <el-switch
              v-model="conf[5]"
              class="switchs"
              active-color="#0096E0"
              inactive-color="#E5E6EC"
              active-text=""
              inactive-text=""
              @change="handleChange5"
            />
            <p class="times-per-date">
              （生成频率：日/生成时间：9:00:00）
            </p>
          </div>
        </el-col>
        <el-col
          v-show="false"
          :span="8"
        >
          <div class="block">
            <p class="title">
              小组统计表
              <span
                v-show="!!conf[6]"
                class="next-time"
              >下次：{{ switchs.team&&switchs.team.nextTime||'---' }}</span>
            </p>
            <div class="thumb call" />
            <el-switch
              v-model="conf[6]"
              class="switchs"
              active-color="#0096E0"
              inactive-color="#E5E6EC"
              active-text=""
              inactive-text=""
              @change="handleChange6"
            />
            <p class="times-per-date">
              （生成频率：周/生成时间：9:00:00）
            </p>
          </div>
        </el-col>
        <el-col
          v-show="false"
          :span="8"
        >
          <div class="block">
            <p class="title">
              部门统计表
              <span
                v-show="!!conf[7]"
                class="next-time"
              >下次：{{ switchs.dept&&switchs.dept.nextTime||'---' }}</span>
            </p>
            <div class="thumb call" />
            <el-switch
              v-model="conf[7]"
              class="switchs"
              active-color="#0096E0"
              inactive-color="#E5E6EC"
              active-text=""
              inactive-text=""
              @change="handleChange7"
            />
            <p class="times-per-date">
              （生成频率：周/生成时间：9:00:00）
            </p>
          </div>
        </el-col>
        <el-col
          v-show="false"
          :span="8"
        >
          <div class="block">
            <p class="title">
              机构统计表
              <span
                v-show="!!conf[8]"
                class="next-time"
              >下次：{{ switchs.org&&switchs.org.nextTime||'---' }}</span>
            </p>
            <div class="thumb call" />
            <el-switch
              v-model="conf[8]"
              class="switchs"
              active-color="#0096E0"
              inactive-color="#E5E6EC"
              active-text=""
              inactive-text=""
              @change="handleChange8"
            />
            <p class="times-per-date">
              （生成频率：周/生成时间：9:00:00）
            </p>
          </div>
        </el-col>
        <!-- <el-col :span="8">
                <div class="block">
                    <p class="title">待定待定待定统计表
                        <span v-show="!!conf[5]" class="next-time">下次：{{ switchs.bill.nextTime||'---' }}</span>
                    </p>
                    <div class="thumb pending"></div>
                    <el-switch class="switchs"
                      v-model="conf[5]"
                      @change="handleChange5"
                      active-color="#0096E0"
                      inactive-color="#E5E6EC"
                      active-text=""
                      inactive-text="">
                    </el-switch>
                    <p class="times-per-date">（生成频率：周/生成时间：9:00:00）</p>
                </div>
            </el-col> -->
      </el-row>
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves/index.js'
import { statReportManageGet, statReportManagePost } from '@/api/statReport'
import { parseTime } from '@/utils'

export default {
  name: 'ReportManage',
  directives: {
    waves
  },
  data() {
    return {
      conf: [],
      switchs: {
        cover: {},
        avgEfficiency: {},
        efficiency: {},
        efficiencyChain: {},
        bill: {},
        call: {},
        orgId: ''
      },
      isFeatured: '',
      isManual: true
    }
  },
  created() {
    this.getReport()
  },
  methods: {
    getReport() {
      statReportManageGet({}).then(response => {
        console.log('statReportManagePostHandler:', response)
        response = { ...response,
          ...{
            team: {
              configured: +(Math.random() > 0.5),
              nextTime: `${parseTime(Date.now() + 24 * 36e5, '{y}-{m}-{d}')} 09:00:00`
            },
            dept: {
              configured: +(Math.random() > 0.5),
              nextTime: `${parseTime(Date.now() + 24 * 36e5, '{y}-{m}-{d}')} 09:00:00`
            },
            org: {
              configured: +(Math.random() > 0.5),
              nextTime: `${parseTime(Date.now() + 24 * 36e5, '{y}-{m}-{d}')} 09:00:00`
            }
          }
        }
        this.switchs = response
        Object.values(response).map((m, i) => {
          if (i > 0 && i < 9) {
            this.conf.push(!!m.configured)
          }
        })
        console.log('this.conf:::', this.conf)
      }).catch(err => {
        this.$message({
          message: err && err.resultMsg || '获取报表管理失败！',
          type: 'error'
        })
      })
    },
    handleChange0(e) {
      console.log('handleChange0:', this.switchs.cover.configured)
    },
    handleChange1(e) {
      console.log('handleChange1:', this.switchs.avgEfficiency.configured)
    },
    handleChange2(e) {
      console.log('handleChange2:', this.switchs.efficiency.configured)
    },
    handleChange3(e) {
      console.log('handleChange3:', this.switchs.efficiencyChain.configured)
    },
    handleChange4(e) {
      console.log('handleChange4:')
    },
    handleChange5(e) {
      console.log('handleChange5:')
    },
    handleChange6(e) {
      console.log('handleChange6:')
    },
    handleChange7(e) {
      console.log('handleChange7:')
    },
    handleChange8(e) {
      console.log('handleChange8:')
    },
    onSubmit() {
      const postObj = {
        orgId: this.switchs.orgId,
        cover: +this.conf[0],
        avgEfficiency: +this.conf[1],
        efficiency: +this.conf[2],
        efficiencyChain: +this.conf[3],
        bill: +this.conf[4],
        call: +this.conf[5],
        team: +this.conf[6],
        dept: +this.conf[7],
        org: +this.conf[8]
        // pending: +this.conf[5]
      }
      statReportManagePost(postObj).then(response => {
        console.log('statReportManagePost:', response)
        response.resultMsg = response.resultMsg === 'Success' && '修改报表管理成功！' || response.resultMsg
        this.$message({
          message: response && response.resultMsg || '修改报表管理成功！',
          type: 'success'
        })
      }).catch(err => {
        this.$message({
          message: err && err.resultMsg || '修改报表管理失败！',
          type: 'error'
        })
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.report-manage{
    width: 1200px;
    height: 603px;
    padding: 10px 0 0 0;
    .el-form{
        .el-form-item{
            margin-bottom: 15px;
            .el-button{
                position: absolute !important;
                top:-40px;
                right: 20px;
            }
        }
    }
    .block{
        // width: 580px;
        height: 300px;
        background: #fff;
        margin: 0 20px 20px 0;
        padding: 16px 20px;
        position: relative;
        .title{
            margin: 0;
            color: #565656;
            font-weight: bolder;
            .next-time{
                font-size: 12px;
                font-weight: normal;
                color: #0096E0;
                // float: right;
                position: absolute;
                right: 12px;
                top: 20px;
            }
        }
        .thumb{
            width: 200px;
            height: 200px;
            margin: 30px 0 0 0;
            background-size: 100% auto;
            &.stat-case{
                background-image: url(../../assets/stat_report/stat_case.gif);
            }
            &.hour{
                background-image: url(../../assets/stat_report/hour.gif);
            }
            &.week-hour{
                background-image: url(../../assets/stat_report/week_hour.gif);
            }
            &.last-week-hour{
                background-image: url(../../assets/stat_report/last_week_hour.gif);
            }
            &.bill{
                background-image: url(../../assets/stat_report/bill.png);
            }
            &.call{
                background-image: url(../../assets/stat_report/call_conf.png);
            }
            &.team{
                background-image: url(../../assets/stat_report/pending.png);
            }
            &.dept{
                background-image: url(../../assets/stat_report/pending.png);
            }
            &.org{
                background-image: url(../../assets/stat_report/pending.png);
            }
            &.pending{
                background-image: url(../../assets/stat_report/pending.png);
            }
        }
        .switchs{
            // width: 90px;
            // height: 40px;
            position: absolute;
            right: 34px;
            bottom: 74px;
            // zoom:1.5;
            transform: scale(1.5);
        }
        .times-per-date{
            text-align: right;
            color: #565656;
            font-size: 14px;
            margin: 0 0 5px 0;
        }
    }
}

</style>

<style rel="stylesheet/scss" lang="scss">
.report-manage{
}
</style>
